<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图片 | yanyan</title>
    <meta name="description" content="Yan&#39;s blog">
    <meta name="generator" content="VuePress 1.4.0">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    
    <link rel="preload" href="/assets/css/0.styles.e1b3f17d.css" as="style"><link rel="preload" href="/assets/js/app.e358a08d.js" as="script"><link rel="preload" href="/assets/js/2.88fa18d1.js" as="script"><link rel="preload" href="/assets/js/12.e5930132.js" as="script"><link rel="prefetch" href="/assets/js/10.23baf844.js"><link rel="prefetch" href="/assets/js/11.45c148ba.js"><link rel="prefetch" href="/assets/js/13.0547cd14.js"><link rel="prefetch" href="/assets/js/14.3e67795b.js"><link rel="prefetch" href="/assets/js/15.51129890.js"><link rel="prefetch" href="/assets/js/16.6987f89d.js"><link rel="prefetch" href="/assets/js/17.2807cff5.js"><link rel="prefetch" href="/assets/js/18.855e1707.js"><link rel="prefetch" href="/assets/js/19.6da24791.js"><link rel="prefetch" href="/assets/js/20.e24d4aef.js"><link rel="prefetch" href="/assets/js/21.6efc6fba.js"><link rel="prefetch" href="/assets/js/22.10447f0f.js"><link rel="prefetch" href="/assets/js/23.9154cc24.js"><link rel="prefetch" href="/assets/js/24.9ad529fc.js"><link rel="prefetch" href="/assets/js/25.4c092e0a.js"><link rel="prefetch" href="/assets/js/26.debdaa01.js"><link rel="prefetch" href="/assets/js/27.8b90b660.js"><link rel="prefetch" href="/assets/js/28.1a323e01.js"><link rel="prefetch" href="/assets/js/29.6f108fc9.js"><link rel="prefetch" href="/assets/js/3.7210d3aa.js"><link rel="prefetch" href="/assets/js/30.e7df1937.js"><link rel="prefetch" href="/assets/js/31.2cb3120f.js"><link rel="prefetch" href="/assets/js/32.eb64932c.js"><link rel="prefetch" href="/assets/js/33.cac3e2f0.js"><link rel="prefetch" href="/assets/js/34.19ea35c4.js"><link rel="prefetch" href="/assets/js/35.fadf5d03.js"><link rel="prefetch" href="/assets/js/36.88b681f1.js"><link rel="prefetch" href="/assets/js/37.2a799db9.js"><link rel="prefetch" href="/assets/js/38.2741a2bf.js"><link rel="prefetch" href="/assets/js/39.359ceb72.js"><link rel="prefetch" href="/assets/js/4.9e938666.js"><link rel="prefetch" href="/assets/js/40.56fd4a10.js"><link rel="prefetch" href="/assets/js/41.e72117ad.js"><link rel="prefetch" href="/assets/js/42.63a6e190.js"><link rel="prefetch" href="/assets/js/43.c8072421.js"><link rel="prefetch" href="/assets/js/44.84cd8367.js"><link rel="prefetch" href="/assets/js/45.0ac810b0.js"><link rel="prefetch" href="/assets/js/46.bb83ff34.js"><link rel="prefetch" href="/assets/js/47.a9333a81.js"><link rel="prefetch" href="/assets/js/48.526b5494.js"><link rel="prefetch" href="/assets/js/49.73b61cc6.js"><link rel="prefetch" href="/assets/js/5.88b252c7.js"><link rel="prefetch" href="/assets/js/50.f34ab799.js"><link rel="prefetch" href="/assets/js/51.d06a49d9.js"><link rel="prefetch" href="/assets/js/52.348d5482.js"><link rel="prefetch" href="/assets/js/6.0face56b.js"><link rel="prefetch" href="/assets/js/7.31eca58d.js"><link rel="prefetch" href="/assets/js/8.69e9ce95.js"><link rel="prefetch" href="/assets/js/9.f25df9e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e1b3f17d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">yanyan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/html/001" class="sidebar-heading clickable"><span>HTML</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/css/image" class="sidebar-heading clickable open active"><span>CSS</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/css/image.html" class="active sidebar-link">01.图片</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/css/image.html#介绍" class="sidebar-link">介绍</a></li><li class="sidebar-sub-header"><a href="/css/image.html#bmp" class="sidebar-link">BMP</a></li><li class="sidebar-sub-header"><a href="/css/image.html#jpeg" class="sidebar-link">JPEG</a></li><li class="sidebar-sub-header"><a href="/css/image.html#png" class="sidebar-link">PNG</a></li><li class="sidebar-sub-header"><a href="/css/image.html#gif" class="sidebar-link">GIF</a></li><li class="sidebar-sub-header"><a href="/css/image.html#svg" class="sidebar-link">SVG</a></li><li class="sidebar-sub-header"><a href="/css/image.html#base64" class="sidebar-link">Base64</a></li><li class="sidebar-sub-header"><a href="/css/image.html#webp" class="sidebar-link">WebP</a></li><li class="sidebar-sub-header"><a href="/css/image.html#雪碧图" class="sidebar-link">雪碧图</a></li><li class="sidebar-sub-header"><a href="/css/image.html#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/css/px.html" class="sidebar-link">02.长度单位px、em、rem ...</a></li><li><a href="/css/juzhong.html" class="sidebar-link">03.水平垂直居中</a></li><li><a href="/css/float.html" class="sidebar-link">04.浮动布局的优点？有什么缺点？清除浮动有哪些方式</a></li><li><a href="/css/bfc.html" class="sidebar-link">05.什么是BFC？什么条件下会触发？应用场景有哪些？</a></li><li><a href="/css/display.html" class="sidebar-link">06.使用display:inline-block会产生什么问题？解决方法？</a></li><li><a href="/css/007.html" class="sidebar-link">07.div垂直居中，左右10px，高度始终为宽度一半</a></li><li><a href="/css/008.html" class="sidebar-link">08.CSS如何进行品字布局？</a></li><li><a href="/css/009.html" class="sidebar-link">09.CSS如何进行圣杯布局？</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js/001" class="sidebar-heading clickable"><span>JS-基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-v8/001" class="sidebar-heading clickable"><span>JS-V8引擎原理 </span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-async/001" class="sidebar-heading clickable"><span>JS-异步I/O及异步编程</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/http/000" class="sidebar-heading clickable"><span>HTTP</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/extend/002" class="sidebar-heading clickable"><span>拓展阅读</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="图片"><a href="#图片" class="header-anchor">#</a> 图片</h1> <h2 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h2> <p>首先，我们要清楚的是，图片从类型上分，可以分为 <strong>位图</strong> 和 <strong>矢量图</strong>。</p> <ul><li>位图：位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息。因为这些点是离散的，类似于点阵，同时因为多个像素的色彩组合就形成了图片，所以叫这种图为点阵图或者位图。常见位图有 JPG、PNG、GIF 等格式。</li> <li>矢量图：矢量图又叫向量图，它是由一系列计算机指令来描述和记录一幅图，一幅图可以解为点、线、面等组成的子图。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计等，而在前端中比较常用的矢量图有 SVG 等格式……</li></ul> <p>然后，我们按压缩划分，可以将图片分为 <strong>无损压缩</strong> 和 <strong>有损压缩</strong>。</p> <ul><li>无损压缩：无损压缩是对文件本身的压缩，使图片占用的存储空间变小，并且不会损害图片的质量。常见无损压缩有 PNG 等。</li> <li>有损压缩：有损压缩是对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，那么图片质量会越来越差。常见有损压缩有 JPG 等。</li></ul> <p>最后，究根结底，我们需要知道在计算机中，像素是用二进制来表示的。不同图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，那么它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。</p> <p>一个二进制位表示两种颜色 【 0|1 &lt;——对应——&gt; 黑|白 】，如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 中颜色。例如：</p> <ul><li>PNG-8：它有 2^8 种颜色，即 256 种颜色。</li> <li>PNG-24：它有 2^24 种颜色，即 1677216 种颜色（1600 万种颜色）</li></ul> <p>OK，知道了这些基础知识，我们就按图片出现的顺序，一一讲解下常用的图片知识吧！</p> <h2 id="bmp"><a href="#bmp" class="header-anchor">#</a> BMP</h2> <p>早期使用的图片格式，叫 BMP，取自英文单词 BitMap，Windows 中文版译作 位图，它的文件结构很简单，没有压缩，一个一个像素地记录下来。</p> <p>如果你的系统是 Windows，你可以打开 画图 工具，然后点击另存为，你可以看到保存的选项中有个 24位位图 的格式，即 1600 万色的图片。</p> <p>当然，历史总在前进，BMP 这种没有压缩的图片格式，逐渐被后起之秀代替了。</p> <h2 id="jpeg"><a href="#jpeg" class="header-anchor">#</a> JPEG</h2> <p><strong>关键字：</strong> 有损压缩、体积小、加载快、不支持透明</p> <p><strong>简要介绍：</strong> JPEG/JPG 格式，是应用最广泛的图片格式之一，特点如下：</p> <ol><li>JPEG/JPG 采用特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比，因此它的压缩文件尺寸较小，下载速度快，成为互联网最广泛使用的格式。</li> <li>JPEG/JPG 因为属于有损压缩，所以当压缩级别逐渐增大的时候，图片质量会逐渐损耗，所以压缩要适当。</li></ol> <blockquote><p>在合适的场景下，即便我们将图片体积压缩至原有体积的 50% 以下，JPG 仍能保持住 60% 的品质，且因为 JPG 格式以 24 位图存储单个图，可以呈现多达 1600 万种颜色，足以满足大多数场景，</p></blockquote> <p>**适用场景：</p> <ol><li>大的背景图</li> <li>轮播图</li> <li>Banner 图</li></ol> <h2 id="png"><a href="#png" class="header-anchor">#</a> PNG</h2> <p><strong>关键字：</strong> 无损压缩、质量高、体积大、支持透明</p> <p>**简要介绍：</p> <p>PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式，它的压缩比高于 GIF，支持图像透明，可以利用 Alpha 通道调节图像透的明度。</p> <p>PNG 分 PNG-8 和 PNG-24。</p> <ol><li>PNG-8：PNG-8 是无损压缩的索引色彩模式。PNG-8 是 GIF 格式很好的替代，虽然不能像 GIF 一样有动画，也不兼容 IE6 等老旧浏览器。PNG-8 最多支持 256 中颜色。</li> <li>PNG-24：PNG-24 是无损压缩的直接色彩模式。PNG-24 会比 JPEG、GIF、PNG-8 占用更大的存储空间。PNG-24 可以呈现 1600 万种颜色。</li></ol> <blockquote><p>2^8 = 256，2^24 = 1677216</p></blockquote> <p>**适用场景：</p> <ul><li><p>普遍场景</p> <ol><li>小的 Logo，颜色简单且对比强烈的图片或者背景。</li> <li>颜色简单、对比度强的透明小图。</li></ol></li> <li><p>什么时候使用 PNG-8，什么时候使用 PNG-24 呢？</p></li></ul> <ol><li>理论上，位数最大的就是最好的，直接上 PNG-24；但是实际上，为了避免体积过大的问题，一般在适合使用 PNG 的场景中，优先选择比较小巧的 PNG-8。</li> <li>如何确定是使用 PNG-8 还是 PNG-24，这就看你的 UI 设计师或者负责人能接受那个了，除非你设计功底非常好，要不然不要做这个选择！</li></ol> <h2 id="gif"><a href="#gif" class="header-anchor">#</a> GIF</h2> <p><strong>关键字：</strong> 支持动画</p> <p><strong>简要介绍：</strong></p> <p>GIF 格式，不仅仅支持静止图片，也可以支持动画，并且支持透明背景图像，适用于多种操作系统，体积很小，网上小动画很多是 GIF 格式。但是色域不太广，只支持 256 种颜色，这意味着颜色种类少。</p> <blockquote><p>GIF 格式的压缩率一般在 50% 左右。</p></blockquote> <p><strong>适用场景：</strong></p> <ol><li>动图</li></ol> <h2 id="svg"><a href="#svg" class="header-anchor">#</a> SVG</h2> <p><strong>关键字：</strong> 文本文件、体积小、不失真、兼容性好</p> <p><strong>简要介绍：</strong></p> <p>SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式，是可缩放的矢量图形。与 JPG、PNG、GIF 等位图不同，SVG 可以直接用代码来描绘图像，并通过任意文字处理工具打开 SVG 图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到 HTML 中通过浏览器来观看。</p> <p>SVG 格式的图片可以任意放大图形显示，并且不会损失图片质量；SVG 格式可编辑和可搜寻；SVG 格式平均来讲，比 JPG 和 GIF 格式文件要小，并且下载也比较快。</p> <p>SVG 文件通常是极小的，但是当图形的复杂度变高的时候，SVG 文件大小会随之上升，因为 SVG 在渲染的时候需要比像素图更多的计算能力，这也意味着性能的损耗。所以在 Logo 等图上，应尽可能简洁。</p> <p><strong>适用场景：</strong></p> <ol><li>SVG loading 效果图：<a href="https://github.com/SamHerbert/SVG-Loaders" target="_blank" rel="noopener noreferrer">SVG-Loaders<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>转换工具：<a href="http://www.bejson.com/convert/image_to_svg/" target="_blank" rel="noopener noreferrer">在线 JPG、PNG 转 SVG 工具<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>矢量图标库：<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <h2 id="base64"><a href="#base64" class="header-anchor">#</a> Base64</h2> <p><strong>关键字：</strong> 文本文件、依赖编码、小图标解决方案</p> <p><strong>简要介绍：</strong></p> <p>Base64 并非一种图片格式，而是一种编码方式，它类似于雪碧图，是作为小图标解决方案而存在的。和雪碧图一样，Base64 图片的出现，也是为了减少加载网页图片时对服务器的请求次数，从而提升网页性能。Base64 是作为雪碧图的补充而存在的。
Base64 是一种用于传输 8 Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数。</p> <p><strong>适用场景：</strong></p> <ol><li>图片的实际尺寸很小。尽可能在图片不超过 2KB 的情况下（可查看掘金的 Base64 图）。</li> <li>图片无法以雪碧图的形式与其他小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）。</li> <li>图片的更新频率非常低（不需要我们重复编码和修改文件内容，维护成本较低）</li></ol> <blockquote><p>为什么大图不使用 Base64？<br>
因为 Base64 编码后，图片大小会膨胀为源文件的 4/3，如果将大图编码到 HTML 或者 CSS 中，这样后者的体积增加，即便减少了 HTTP 请求，也无法弥补庞大的体积带来的性能开销。</p></blockquote> <p><strong>如何获取</strong>：</p> <ol><li>Webpack 的 loader：<a href="https://www.npmjs.com/package/url-loader" target="_blank" rel="noopener noreferrer">url-loader<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>在线编码工具：<a href="http://imgbase64.duoshitong.com/" target="_blank" rel="noopener noreferrer">图片转换Base64<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <h2 id="webp"><a href="#webp" class="header-anchor">#</a> WebP</h2> <p><strong>关键字</strong>：年轻的全能型选手</p> <p><strong>简要介绍</strong>：
2010 年由 Google 提出，转为 Web 开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。</p> <p>WebP 像 JPEG 一样对图片细节丰富，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片。</p> <blockquote><p>官方介绍：与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。</p></blockquote> <p><strong>适用场景</strong>：</p> <p>由于 WebP 支持情况仅 Chrome、UC 等几家浏览器支持，所以局限性较大，目前暂不考虑使用。</p> <blockquote><p>参考自 Can I Use 网站中的浏览器支持程度：<a href="https://caniuse.com/#search=webp" target="_blank" rel="noopener noreferrer">webp<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></blockquote> <h2 id="雪碧图"><a href="#雪碧图" class="header-anchor">#</a> 雪碧图</h2> <p>雪碧图，CSS Sprites，听起来就很清爽的一种图片，刚开始的时候 以为是大街小巷上卖的 3 块钱瓶装雪碧饮料上的图片，后来知道压根不是同一码事。</p> <blockquote><p>雪碧图不属于图片格式，而是一种图片应用形式。但是因为它在前端赫赫有名，经常使用，故此将其记载下来。</p></blockquote> <p>雪碧图又叫精灵图，因为 Sprites 的原因叫 “雪碧”，出现的原因是随着网速的提升，同时因为请求次数过多的时候会卡网页，所以我们就将 N 张小图集成到一张大图上，从而提升页面打开的速度。这种多张小图放在一张大图上的操作，就叫做精灵图（雪碧图 - CSS Sprites）</p> <p>那么，平时如何使用雪碧图呢？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.img</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/img.png<span class="token punctuation">)</span></span>  no-repeat<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.my-head</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span>160px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span><span class="token property">background-position</span><span class="token punctuation">:</span>0 0<span class="token punctuation">;</span><span class="token punctuation">}</span>
<span class="token selector">.my-picture</span><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span>292px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>1253px<span class="token punctuation">;</span><span class="token property">background-position</span><span class="token punctuation">:</span>0 -160px<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre></div><div class="language-sass extra-class"><pre class="language-sass"><code><span class="token atrule-line"><span class="token atrule">@mixin</span> img{background:url(../images/img.png) no-repeat; }</span>
<span class="token atrule-line"><span class="token atrule">@mixin</span> my-head{height:160px;width:120px;background-position: 0 0;}</span>
<span class="token atrule-line"><span class="token atrule">@mixin</span> my-picture{height:292px;width:1253px;background-position: 0 -160px;}</span>
</code></pre></div><p>如上面代码所示，现在网上有非常多的雪碧图制作工具，我们只需要将小图发到工具上去，就可以生成大图，同时获得它的 css/sass 代码，而不需要自己一个一个定位。</p> <blockquote><p>这是 Windows 版本的工具，网上有很多雪碧图/精灵图制作工具，这里就不推荐本人使用的了。</p></blockquote> <blockquote><p>MDN 定义：图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。</p></blockquote> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>至此，我们对图片的介绍就结束了，在这里我们列个表进行汇总：</p> <table><thead><tr><th>格式</th> <th>使用场景</th></tr></thead> <tbody><tr><td>JPG/JPEG</td> <td>1. 大的背景图； 2. 轮播图； 3. Banner 图</td></tr> <tr><td>PNG</td> <td>1. 小 Logo； 2. 透明背景</td></tr> <tr><td>GIF</td> <td>动态图片</td></tr> <tr><td>SVG</td> <td>能适应不同设备且画质不能损坏的图片</td></tr> <tr><td>Base64</td> <td>大小不超过 2KB，且更新率低的图片</td></tr> <tr><td>雪碧图</td> <td>小图太多的时候，集中成一张图片减少 HTTP 请求</td></tr></tbody></table> <blockquote><p>雪碧图不属于格式，但属于一种应用形式</p></blockquote> <p>最后，在开发中会常用到一些资料</p> <ul><li><strong>常用优秀资源</strong>：</li></ul> <ol><li>SVG loading 效果：<a href="https://github.com/SamHerbert/SVG-Loaders" target="_blank" rel="noopener noreferrer">SVG-Loaders<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>矢量图标库：<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">Iconfont-阿里巴巴矢量图标库<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>在线制作 Logo：<a href="http://www.uugai.com/logoa/yulan.php" target="_blank" rel="noopener noreferrer">U 钙网<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>压缩 PNG 或者 JPG：<a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer">TinyPNG<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <ul><li><strong>获取图片素材</strong>：</li></ul> <ol><li>千库网：<a href="http://588ku.com/" target="_blank" rel="noopener noreferrer">地址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>包图网：<a href="https://ibaotu.com/" target="_blank" rel="noopener noreferrer">地址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <ul><li><strong>在线转换工具</strong>：</li></ul> <ol><li><a href="http://www.bejson.com/convert/image_to_svg/" target="_blank" rel="noopener noreferrer">JPG、PNG 转 SVG<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://imgbase64.duoshitong.com/" target="_blank" rel="noopener noreferrer">JPG、PNG、GIF 转 Base64<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.bitbug.net/" target="_blank" rel="noopener noreferrer">JPG、PNG、GIF 转 ICO<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <ul><li><strong>其他资料支持</strong>：</li></ul> <ol start="5"><li>Can I Use —— 查看各种浏览器支持程度：<a href="https://caniuse.com" target="_blank" rel="noopener noreferrer">caniuse.com<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <h3 id="参考资料"><a href="#参考资料" class="header-anchor">#</a> 参考资料</h3> <p><a href="https://www.jianshu.com/p/6e1941de7952" target="_blank" rel="noopener noreferrer">《2019 面试准备 - 图片》<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/html/002.html" class="prev">
        02 meta标签属性有哪些？
      </a></span> <span class="next"><a href="/css/px.html">
        02.长度单位px、em、rem ...
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e358a08d.js" defer></script><script src="/assets/js/2.88fa18d1.js" defer></script><script src="/assets/js/12.e5930132.js" defer></script>
  </body>
</html>
